<template>
  <view>
    <up-sticky bgColor="#fff">
      <view class="top-navigater">
        <view class="top-navigater-option">
          <view class="top-navigater-type">
            <view class="top-navigater-type-content">宠物服务</view>
            <img class="top-navigater-type-img" :src="one" />
          </view>
          <view class="top-navigater-region">
            <view class="top-navigater-region-content">区域</view>
            <img class="top-navigater-region-img" :src="two" />
          </view>
        </view>
        <view class="top-navigater-details" @click="changStatu">
          <img class="top-navigater-details-img" :src="three" />
        </view>
      </view>
    </up-sticky>
    <cardlist v-if="!isRow"></cardlist>
    <rowcardlist v-else></rowcardlist>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import one from '@/static/images/31.png'
import two from '@/static/images/32.png'
import three from '@/static/images/33.png'
import cardlist from './cardlist.vue'
import rowcardlist from './rowcardlist.vue'

const isRow = ref(false)
const changStatu = () => {
  isRow.value = !isRow.value
}
// 测试 uni API 自动引入
onLoad(() => {})
</script>

<style scoped lang="scss">
.top-navigater {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60rpx;
  font-size: 24rpx;
  .top-navigater-option {
    display: flex;
    flex: 1;
    align-items: center;
  }
  .top-navigater-type {
    display: flex;
    align-items: center;
    color: #333333ff;
    .top-navigater-type-img {
      display: block;
      width: 12rpx;
      height: 6rpx;
      margin-bottom: -5rpx;
      margin-left: 10rpx;
    }
  }
  .top-navigater-region {
    display: flex;
    align-items: center;
    margin-left: 50rpx;
    color: #999999ff;
    .top-navigater-region-img {
      display: block;
      width: 12rpx;
      height: 6rpx;
      margin-bottom: -5rpx;
      margin-left: 10rpx;
    }
  }
  .top-navigater-details-img {
    width: 24rpx;
    height: 24rpx;
  }
}
</style>
